<template>
  <!-- 群成员 -->
  <el-drawer title="群成员 " :visible.sync="drawer" custom-class="demo-drawer" direction="rtl" size="80%" :modal-append-to-body="false" :append-to-body="true">
    <div class="app-container">
      <div style="display: flex; border-bottom: 1px solid; margin-bottom: 20px">
        <p style="width: 50%">群聊名称：{{ data.name }}</p>
        <p style="width: 50%">所属小程序：{{ data.cate__project__name }}</p>
      </div>
      <el-form size="mini" :inline="true" :model="searchForm" @keyup.enter.native="getDataList()">
        <el-form-item label="姓名/微信昵称：">
          <el-input clearable placeholder="" style="width: 300px" v-model="searchForm.name"></el-input>
        </el-form-item>

        <el-form-item label="群内昵称:">
          <el-input clearable placeholder="" style="width: 300px" v-model="searchForm.nickname"></el-input>
        </el-form-item>

        <el-form-item label="成员类型:">
          <el-select v-model="searchForm.member_type" placeholder="请选择" style="width: 300px">
            <el-option label="企业成员" value="1"></el-option>
            <el-option label="外部联系人" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邀请者:">
          <el-input el-input clearable placeholder="" style="width: 300px" v-model="searchForm.inviter_name"></el-input>
        </el-form-item>
        <el-form-item label="入群方式:">
          <el-select v-model="searchForm.in_method" placeholder="请选择" style="width: 300px">
            <el-option label="群成员邀请入群" value="1"></el-option>
            <el-option label="通过邀请链接入群" value="2"></el-option>
            <el-option label="通过扫描群二维码入群" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入群时间：">
          <el-date-picker end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" type="daterange" v-model="searchForm.date" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="getDataList()" icon="el-icon-search" type="primary">查询</el-button>
          <el-button size="mini" @click="refDataList()" icon="el-icon-refresh" type="warning">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- <div style="margin-bottom: 20px; text-align: right">
        <el-button size="mini" @click="handleDel()" type="danger"> 移除群聊</el-button>
        <el-button size="mini" @click="addOrUpdateHandle()" type="primary">更换群聊</el-button>
      </div> -->
      <!-- 表格开始 -->
      <el-table :data="dataList" size="mini" border style="width: 100%; margin-top: 20px" v-loading="dataListLoading" ref="multipleTable" @selection-change="handleSelectionChange">
        >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" header-align="center" label="序号" prop="typeName" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="姓名/微信昵称" prop="nick_name"></el-table-column>
        <el-table-column align="center" header-align="center" label="群内昵称" prop="group_nick_name"> </el-table-column>
        <!-- <el-table-column align="center" header-align="center" label="群成员id" prop="inner_group_id"></el-table-column> -->
        <el-table-column align="center" header-align="center" label="成员类型" prop="member_type"></el-table-column>
        <!-- <el-table-column align="center" header-align="center" label="微信unionid" prop="wx_union_id"> </el-table-column> -->
        <el-table-column align="center" header-align="center" label="邀请者" prop="inviter_name"></el-table-column>
        <el-table-column align="center" header-align="center" label="入群方式" prop="in_method">
          <template slot-scope="scope">
            <span>{{ scope.row.in_method == 1 ? '成员邀请入群' : scope.row.in_method == 2 ? '链接邀请入群' : '扫码入群' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="入群时间" prop="in_group_time"> </el-table-column>
        <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
          <template slot-scope="scope">
            <!-- <el-button size="mini" @click="handleDel(scope.row)" plain size="small" type="danger">移除群聊</el-button> -->
            <!-- <el-button size="mini" @click="addOrUpdateHandle(scope.row)" plain size="small" type="primary">更换群聊</el-button> -->
            <el-button size="mini" @click="handleDetail(scope.row)" type="text">查看成员信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalPage"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 10px; text-align: right"
      ></el-pagination>

      <!--更换群聊-->
      <el-dialog title="更换群聊" :visible.sync="dialogTableVisible" :modal-append-to-body="true" :append-to-body="true" width="30%">
        <el-form size="mini" :model="form" :rules="rules" ref="form">
          <el-form-item label-width="150px" label="所属小程序：" v-show="isshow">
            {{ data.cate__project__name }}
          </el-form-item>
          <el-form-item label-width="150px" label="姓名：" v-show="isshow">
            {{ data.name1 }}
          </el-form-item>
          <el-form-item label-width="150px" label="群聊名称：" v-show="isshow">
            {{ data.name }}
          </el-form-item>
          <el-form-item label-width="150px" label="群聊类型" prop="to_group_id">
            <el-select v-model="form.to_group_id" placeholder="请选择" style="width: 100%">
              <el-option v-for="(item, index) in cate" :key="index" :label="item.key" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="textMessageReset('form')">取 消</el-button>
          <el-button size="mini" :loading="false" type="primary" @click="outboundCallSubmit('form')">确 定</el-button>
        </div>
      </el-dialog>

      <!--成员信息 -->
      <el-dialog title="成员信息" :visible.sync="showDialogDetail" :modal-append-to-body="true" :append-to-body="true" width="40%">
        <div class="dialog-content" v-if="numberDetail && numberDetail.in_group">
          <div class="panel">
            <div class="title">入群信息</div>
            <div class="content">
              <div class="item">
                <div class="label">姓名/微信昵称：</div>
                <div class="value">{{ numberDetail.in_group.nick_name || '--' }}</div>
              </div>
              <div class="item">
                <div class="label">群内昵称：</div>
                <div class="value">{{ numberDetail.in_group.group_nick_name || '--' }}</div>
              </div>
              <div class="item">
                <div class="label">成员类型：</div>
                <div class="value">{{ numberDetail.in_group.member_type || '--' }}</div>
              </div>
              <div class="item">
                <div class="label">邀请者：</div>
                <div class="value">{{ numberDetail.in_group.inviter_name || '--' }}</div>
              </div>
              <div class="item">
                <div class="label">入群方式：</div>
                <div class="value">{{ numberDetail.in_group.in_method == 1 ? '成员邀请入群' : numberDetail.in_group.in_method == 2 ? '链接邀请入群' : '扫码入群' || '--' }}</div>
              </div>
              <div class="item">
                <div class="label">入群时间：</div>
                <div class="value">{{ numberDetail.in_group.in_group_time || '--' }}</div>
              </div>
            </div>
          </div>
          <div class="panel">
            <div class="title">用户资料</div>
            <div class="content">
              <div class="item">
                <div class="label">称呼：</div>
                <div class="value">{{ numberDetail.user_info.user_name || '--' }}</div>
              </div>
              <div class="item">
                <div class="label">手机号：</div>
                <div class="value">{{ numberDetail.user_info.user_phone || '--' }}</div>
              </div>
              <div class="item">
                <div class="label">企业名称：</div>
                <div class="value">{{ numberDetail.user_info.user_company || '--' }}</div>
              </div>
              <div class="item">
                <div class="label">企业介绍：</div>
                <div class="value">{{ numberDetail.user_info.user_company_desc || '--' }}</div>
              </div>
            </div>
          </div>
          <div class="panel">
            <div class="title">Feijiu资料</div>
            <div class="content">
              <div class="item">
                <div class="label">Feijiu用户：</div>
                <div class="value">{{ numberDetail.feijiu.is_feijiu_user || '--' }}</div>
              </div>
              <div class="item">
                <div class="label">Feijiu会员：</div>
                <div class="value">{{ numberDetail.feijiu.feijiu_member || '--' }}</div>
              </div>
              <div class="item">
                <div class="label">Feijiu公司名称：</div>
                <div class="value">{{ numberDetail.feijiu.feijiu_company || '--' }}</div>
              </div>
            </div>
          </div>
          <div class="panel">
            <div class="title">群聊信息</div>
            <div class="content">
              <div class="item">
                <div class="label">已加入：</div>
                <div class="value">{{ numberDetail.group_info.power_success }}</div>
              </div>
              <div class="item">
                <div class="label">审核中：</div>
                <div class="value">{{ numberDetail.group_info.power_await }}</div>
              </div>
              <div class="item">
                <div class="label">审核驳回：</div>
                <div class="value">{{ numberDetail.group_info.power_refuse }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </el-drawer>
</template>
<script>
import { apiMemberList, group_remove, group_select, group_move_group, apiMemberDetail } from '@/api/wxapplet/index.js'
export default {
  data() {
    return {
      isshow: false,
      dialogTableVisible: false,
      showDialogDetail: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      data: {
        cate__project__name: '',
        name: '',
        name1: '',
      },
      // table表格查询数据
      searchForm: {
        name: '',
        project_id: '',
        status: '',
        created_user: '',
        date: [],
        group_id: '',
      },
      cate: [], //群聊列表
      dataListLoading: false,
      dataList: [],
      multipleSelection: [], //选中的数据
      rowData: null,
      drawer: false,
      form: {
        to_group_id: '',
      },
      dialogTabID: '', //选择的当前条id
      rules: {
        to_group_id: [{ required: true, message: '选择群聊类型', trigger: 'blur' }],
      },
      numberDetail: {},
    }
  },
  mounted() {
    group_select({}).then((res) => {
      console.log(res)
      // 群聊
      this.cate = res.data.project
    })
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchForm)
      if (info.date.length) {
        info.start_time = info.date[0]
        info.end_time = info.date[1]
        delete info.date
      }

      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiMemberList(formData)
        .then((res) => {
          this.dataList = res.result.items
          this.totalPage = res.result.total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    //重置
    refDataList() {
      this.searchForm = {
        name: '',
        project_id: '',
        status: '',
        created_user: '',
        date: [],
        group_id: '',
      }
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },

    // 移除群聊
    handleDel(row) {
      if (row) {
        // 单个移除群聊
        var info = Object.assign({ ids: [row.id] })
      } else {
        // 批量移除群聊
        var info = { ids: [] }
        for (let key in this.multipleSelection) {
          info.ids.push(this.multipleSelection[key].id)
        }
      }
      info.group_id = this.searchForm.group_id //群id
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }

      this.$confirm('确认移除群?')
        .then((_) => {
          group_remove(formData)
            .then((res) => {
              this.$message.success('移除成功')
              this.getDataList()
            })
            .catch((e) => {
              this.$message.error('移除失败')
            })
        })
        .catch((_) => {})
    },
    // 更新值
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 更换群聊
    addOrUpdateHandle(row) {
      if (row) {
        this.isshow = true
        this.dialogTabID = [row.id]
        this.data.name1 = row.name
      } else {
        this.isshow = false
        var Array = []
        for (let key in this.multipleSelection) {
          Array.push(this.multipleSelection[key].id)
        }
        this.dialogTabID = Array
      }
      if (this.dialogTabID.length > 0) this.dialogTableVisible = true
    },
    // 查看成员信息
    handleDetail(row) {
      const info = { id: row.id }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }

      apiMemberDetail(formData).then((res) => {
        const { code, data } = res
        if (code === 200) {
          this.showDialogDetail = true
          this.numberDetail = data
        }
      })
    },
    //  打开弹出层
    open(row, role) {
      if (this.drawer) {
        return
      }
      this.rowData = row || null
      this.drawer = true
      this.openHook()
      // this.getshcoolselect()
    },
    //   回显
    openHook() {
      this.$nextTick((a) => {
        this.showNumInput = false
        this.refNum = 60 * 5 + 1
        // this.clearData(this.rowData);

        if (this.rowData) {
          // 修改
          this.data.name = this.rowData.name
          this.data.cate__project__name = this.rowData.cate__project__name

          this.searchForm.group_id = this.rowData.id
          console.log(this.rowData)
          for (let key in this.dataForm) {
            this.dataForm[key] = this.rowData[key]
          }
          this.getDataList()
        } else {
          this.loading = false
        }
      })
    },
    clearData() {
      this.$refs.vendorRuleForm.resetFields()
    },
    //  更换群弹出层取消
    textMessageReset(formName) {
      this.$refs[formName].resetFields()
      this.dialogTableVisible = false
    },
    // 更换群弹出层确定
    outboundCallSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const info = Object.assign(this.form)
          info.ids = this.dialogTabID

          info.group_id = this.searchForm.group_id
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }
          group_move_group(formData)
            .then((res) => {
              this.textMessageReset('form')
              this.$message.success('移入成功')
              this.getDataList()
            })
            .catch((e) => {
              this.$message.error('移入失败')
            })
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.dialog-content {
  padding-left: 20px;
  .panel {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 2;
    .title {
      font-weight: bold;
      margin-bottom: 10px;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      .item {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .label {
          color: #999999;
        }
        .value {
        }
      }
    }
  }
}
</style>
